<template>
    <div id="nickname" class="person-detail">
            <div>
                <van-nav-bar
                    title="修改昵称"
                    :fixed="true"
                    left-arrow
                    @click-left="back"
                 />
            </div>
            <div >
                <van-field v-model="nickName" placeholder="">
                    <svg-icon slot="right-icon" @click.native="nickName = ''" icon-class="修改昵称-删除" widthW="1em" heightH="1em" ></svg-icon>
                </van-field>
            </div>
            <div class="mine-out">
                <van-button type="default" @click = "save()">保存</van-button>
            </div>
    </div>
</template>
<script>
import mine from "../../../controller/mine";
export default {
    name: 'nickname',
    components: {},
    data() {
        return {
            nickName : this.$route.query.id
        }
    },
    methods: {
        updateUserInfo(){
            if(this.nickName === ''){
                this.$toast("昵称不能为空")
                return 
            }
            let data = {
                username : this.nickName
            }
            mine.user_v1_updateOwn(data).then(res=>{
                if (res.code === '0') {
                    this.$toast('');
                    this.$router.push({path:'/person/personaldetail'})
                }else{
                    this.$toast(res.msg)
                }
            })
        },
        back(){
           this.$router.go(-1)
        },
        save(){
                this.updateUserInfo()
        },
    }
}
</script>
<style lang="scss" scoped>
@import '../style/index.scss';
#nickname{
    .mine-out{
        margin-top: 26%;
            button{
                width: 80%;
                height:80%;
                margin: auto;
                display: block;
                font-family: PingFangSC-Medium;
                font-size: 20px;
                color: #fff;
                letter-spacing: 0;
                text-align: center;
                background: #DC4630;
                border-radius: 44px;
                border-radius: 44px;
            }
        }
}
</style>
<style lang="scss">

</style>

